<template>
  <div class="Order">
    <div class="form-seach">
      <el-form :model="form" class="ele-form">
        <el-form-item label="订单搜索:">
          <el-col :span="4">
            <el-input v-model="form.unmber" placeholder="输入控制器编号" />
          </el-col>
          <el-col :span="6" class="maringleft">
            <el-input v-model="form.unmber" placeholder="请输入手机号" />
          </el-col>
        </el-form-item>
        <el-form-item label="商品:">
          <el-col :span="4">
            <el-select v-model="form.status">
              <el-option value="1" label="test" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="订单状态:">
          <el-col :span="4">
            <el-select v-model="form.commdiry">
              <el-option value="1" label="test" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="门店:">
          <el-col :span="3">
            <el-select v-model="form.allprovince">
              <el-option value="1" label="test" />
            </el-select>
          </el-col>
          <el-col :span="3" class="maringleft">
            <el-select v-model="form.allcity">
              <el-option value="1" label="test" />
            </el-select>
          </el-col>
          <el-col :span="3" class="maringleft">
            <el-select v-model="form.allshop">
              <el-option value="1" label="test" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="查询时段:">
          <div class="el-area">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="开始时间"
              default-time="12:00:00"
            />&nbsp;&nbsp;~&nbsp;&nbsp;
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="结束时间"
              default-time="12:00:00"
            />
            <el-button
              size="mini"
              plain
              class="maringleft"
              @click="getTiemWeek"
            >最近七天</el-button>
            <el-button
              size="mini"
              plain
              @click="getTimeMonth"
            >最近三十天</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el--button">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="ele-content">
      <div class="ele-to-sl">
        <div>
          <el-radio-group v-model="radio1">
            <el-radio-button label="全部订单" />
            <el-radio-button label="使用中" />
            <el-radio-button label="已完成" />
          </el-radio-group>
        </div>
        <div />
      </div>
    </div>
    <div class="custom-item">
      <el-table :data="BindTable" height="400">
        <el-table-column
          label="订单号"
          header-align="center"
          align="center"
          prop="test"
        />
        <el-table-column
          label="用户"
          header-align="center"
          align="center"
          prop="test"
        />
        <el-table-column
          label="手机号"
          header-align="center"
          align="center"
          prop="test"
        />
        <el-table-column
          label="控制器编号"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="设备编号"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="开锁时间"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="租赁扫码设备"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="归还时间"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="归还扫码设别"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="时长"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="租金"
          prop="test"
          header-align="center"
          align="center"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <h5>结束订单</h5>
        <p><span>订单号:</span><span>14356543576543</span></p>
        <p><span>用户:</span><span>14356543576543</span></p>
        <p><span>商品:</span><span>14356543576543</span></p>
        <p><span>租赁时间:</span><span>14356543576543</span></p>
        <p>
          <span>归还时间:</span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
            prefix-icon="el-icon-date"
          />
        </p>
        <el-button type="primary">确认结束订单</el-button>
      </div>
      <div class="right">
        <h5>月租</h5>
        <p><span>订单号:</span><span>14356543576543</span></p>
        <p><span>用户:</span><span>14356543576543</span></p>
        <p><span>商品:</span><span>14356543576543</span></p>
        <p><span>租赁时间:</span><span>14356543576543</span></p>
        <p><span>租赁类型:</span><el-radio>月租</el-radio></p>
        <p>
          <span>归还时间:</span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            suffix-icon="el-icon-date"
            placeholder="选择日期时间"
          />
        </p>
        <el-button type="primary">提交</el-button>
      </div>
    </div>
    <div class="footer">
      <div class="right list">
        <h5>月租</h5>
        <p><span>订单号:</span><span>14356543576543</span></p>
        <p><span>用户:</span><span>14356543576543</span></p>
        <p><span>商品:</span><span>14356543576543</span></p>
        <p><span>租赁时间:</span><span>14356543576543</span></p>
        <p><span>租赁类型:</span><el-radio>月租</el-radio></p>
        <p>
          <span>赔偿金额:</span>
          <el-input style="width:200px" />&nbsp;元
        </p>
        <el-button type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
/** 订单管理 */
export default {
  name: 'Order',
  data() {
    return {
      radio1: '全部订单',
      value1: null,
      form: {
        endTime: null,
        startTime: null,
        unmber: '',
        status: '1'
      },
      BindTable: [
        {
          test: '1111'
        }
      ]
    }
  },
  methods: {
    /** 最近一周 */
    getTiemWeek() {
      this.timeGet(7)
    },
    /** 最近30天 */
    getTimeMonth() {
      this.timeGet(30)
    },
    timeGet(val) {
      const end = new Date()
      const start = new Date(end.getTime() - 3600 * 1000 * 24 * val)
      this.form.startTime = start
      this.form.endTime = end
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.maringleft {
  margin-left: 12px;
}
.Order {
  padding-bottom: 100px;
  .form-seach {
    background: #f3f3f3;
    padding: 40px 20px;
    .ele-form {
      ::v-deep.el-form-item__label {
        width: 100px;
        text-align: start;
      }
      .el-select {
        width: 100%;
      }
      .el--button {
        margin-left: 100px;
      }
    }
  }
  .ele-content {
    width: 100%;
    .ele-to-sl {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0px;
    }
  }
  .custom-item {
    widows: 100%;
    .pagination {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      margin-bottom: 100px;
    }
  }
  .footer {
    display: flex;
    .left,
    .right {
      width: 600px;
      border: 1px solid #e6e6e6;
      border-radius: 5px;
      padding: 20px 50px;
      p {
        font-size: 14px;
        color: gray;
        span:first-child {
          display: inline-block;
          width: 80px;
        }
      }
    }
    .left {
      margin-right: 30px;
    }
    .right {
      margin-right: 30px;
    }
    .list{
      margin-top: 20px;
    }
    .el-button{
      width: 200px;
    }
  }
}
</style>
